<template>
  <div class="q-pa-md">
    <t-btn-dropdown class="glossy" color="purple" label="Account Settings">
      <div class="row no-wrap q-pa-md">
        <div class="column">
          <div class="text-h6 q-mb-md">Settings</div>
          <t-toggle v-model="mobileData" label="Use Mobile Data" />
          <t-toggle v-model="bluetooth" label="Bluetooth" />
        </div>

        <t-separator vertical inset class="q-mx-lg" />

        <div class="column items-center">
          <t-avatar size="72px">
            <img src="https://cdn.quasar.dev/img/boy-avatar.png" />
          </t-avatar>

          <div class="text-subtitle1 q-mt-md q-mb-xs">John Doe</div>

          <t-btn color="primary" label="Logout" push size="sm" v-close-popup />
        </div>
      </div>
    </t-btn-dropdown>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        mobileData: ref(false),
        bluetooth: ref(false),
      };
    },
  };
</script>
